@use "sass:map";
@use "sass:list";

@use "./functions.scss" as *;

[data-div-type="element"] {
  &[data-element-type="button"] {
    min-height: 24px !important;
    & > .wrapper {
      // width: 100%;
      height: 100%;
      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
    }

    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }
    &[data-icon-position="left"] {
      --_sf-fd-bn: row;
    }
    &[data-icon-position="right"] {
      --_sf-fd-bn: row-reverse;
    }
    &[data-icon-position="center"] {
      --_sf-fd-bn: row;
    }

    &:hover {
      --_sf-hr-bd-cr: var(
        --_ctm-mob-dn-hr-se-bd-cr,
        var(--_ctm-tab-dn-hr-se-bd-cr, var(--_ctm-dn-hr-se-bd-cr))
      );
      --_sf-hr-br-cr: var(
        --_ctm-mob-dn-hr-se-br-cr,
        var(--_ctm-tab-dn-hr-se-br-cr, var(--_ctm-dn-hr-se-br-cr))
      );
      --_sf-hr-br-st: var(
        --_ctm-mob-dn-hr-se-br-se,
        var(--_ctm-tab-dn-hr-se-br-se, var(--_ctm-dn-hr-se-br-se))
      );
      --_sf-hr-br-wh: var(
        --_ctm-mob-dn-hr-se-br-wh,
        var(--_ctm-tab-dn-hr-se-br-wh, var(--_ctm-dn-hr-se-br-wh))
      );
      --_sf-hr-br-br: var(
        --_ctm-mob-dn-hr-se-br-rs,
        var(--_ctm-tab-dn-hr-se-br-rs, var(--_ctm-dn-hr-se-br-rs))
      );
      --_sf-hr-bx-sw: var(
          --_ctm-mob-dn-hr-se-sw-ae,
          var(--_ctm-tab-dn-hr-se-sw-ae, var(--_ctm-dn-hr-se-sw-ae))
        )
        var(--_ctm-mob-dn-hr-se-sw-br, var(--_ctm-tab-dn-hr-se-sw-br, var(--_ctm-dn-hr-se-sw-br)))
        var(--_ctm-mob-dn-hr-se-sw-sd, var(--_ctm-tab-dn-hr-se-sw-sd, var(--_ctm-dn-hr-se-sw-sd)))
        var(--_ctm-mob-dn-hr-se-sw-cr, var(--_ctm-tab-dn-hr-se-sw-cr, var(--_ctm-dn-hr-se-sw-cr)));

      --_sf-hr-fc: var(
        --_ctm-mob-dn-hr-se-cr,
        var(--_ctm-tab-dn-hr-se-cr, var(--_ctm-dn-hr-se-cr))
      );
      --_sf-hr-ff: var(
        --_ctm-mob-dn-hr-se-ft-fy,
        var(--_ctm-tab-dn-hr-se-ft-fy, var(--_ctm-dn-hr-se-ft-fy))
      );
      --_sf-hr-tt-tm: var(
        --_ctm-mob-dn-hr-se-tt-tm,
        var(--_ctm-tab-dn-hr-se-tt-tm, var(--_ctm-dn-hr-se-tt-tm))
      );
      --_sf-hr-wd-wp: var(
        --_ctm-mob-dn-hr-se-wd-wp,
        var(--_ctm-tab-dn-hr-se-wd-wp, var(--_ctm-dn-hr-se-wd-wp))
      );
      --_sf-hr-wd-bk: var(
        --_ctm-mob-dn-hr-se-wd-bk,
        var(--_ctm-tab-dn-hr-se-wd-bk, var(--_ctm-dn-hr-se-wd-bk))
      );
      --_sf-hr-fs: var(
        --_ctm-mob-dn-hr-se-ft-se,
        var(--_ctm-tab-dn-hr-se-ft-se, var(--_ctm-dn-hr-se-ft-se))
      );
      --_sf-hr-fw: var(
        --_ctm-mob-dn-hr-se-ft-wt,
        var(--_ctm-tab-dn-hr-se-ft-wt, var(--_ctm-dn-hr-se-ft-wt))
      );
      --_sf-hr-ft: var(
        --_ctm-mob-dn-hr-se-ft-se-ic,
        var(--_ctm-tab-dn-hr-se-ft-se-ic, var(--_ctm-dn-hr-se-ft-se-ic))
      );
      --_sf-hr-ta: var(
        --_ctm-mob-dn-hr-se-tt-an,
        var(--_ctm-tab-dn-hr-se-tt-an, var(--_ctm-dn-hr-se-tt-an))
      );
      --_sf-hr-ls: var(
        --_ctm-mob-dn-hr-se-lr-sg,
        var(--_ctm-tab-dn-hr-se-lr-sg, var(--_ctm-dn-hr-se-lr-sg))
      );
      --_sf-hr-lh: var(
        --_ctm-mob-dn-hr-se-le-ht,
        var(--_ctm-tab-dn-hr-se-le-ht, var(--_ctm-dn-hr-se-le-ht))
      );

      --_sf-hr-ic-wt: var(
        --_ctm-mob-dn-hr-se-in-se,
        var(--_ctm-tab-dn-hr-se-in-se, var(--_ctm-dn-hr-se-in-se))
      );
      --_sf-hr-ic-ht: var(
        --_ctm-mob-dn-hr-se-in-se,
        var(--_ctm-tab-dn-hr-se-in-se, var(--_ctm-dn-hr-se-in-se))
      );
      --_sf-hr-ic-st: var(
        --_ctm-mob-dn-hr-se-in-c1,
        var(--_ctm-tab-dn-hr-se-in-c1, var(--_ctm-dn-hr-se-in-c1))
      );
      --_sf-hr-tt-dn: var(
        --_ctm-mob-dn-hr-se-ue,
        var(--_ctm-tab-dn-hr-se-ue, var(--_ctm-dn-hr-se-ue))
      );

      &[data-hover-show-shadow="false"] {
        --_hover-show-shadow: none;
      }
      &[data-hover-show-icon="false"] {
        --_hover-show-icon: none;
      }
    }
    &[data-show-icon="false"] {
      --_show-icon: none;
    }
    &[data-element-style="Icon"] {
      &[data-icon-position="left"] {
        --_sf-jc: start;
      }
      &[data-icon-position="right"] {
        --_sf-jc: end;
      }
      &[data-icon-position="center"] {
        --_sf-jc: center;
      }
    }

    .btn__with__text {
      background-color: var(
        --_sf-hr-bd-cr,
        var(--_ctm-mob-dn-dt-se-bd-cr, var(--_ctm-tab-dn-dt-se-bd-cr, var(--_ctm-dn-dt-se-bd-cr)))
      );
      // padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
      padding: prepareMediaVariable(--_ctm-lt-pg);
      // (8px, var(--_sf-element-vt-pd)) min(15px, var(--_sf-element-hr-pd));
      display: flex;
      flex-direction: var(--_sf-fd-bn);
      align-items: center;
      // justify-content: var(--_sf-jc, center);
      justify-content: var(
        --_ctm-mob-lt-tt-an,
        var(--_ctm-tab-lt-tt-an, var(--_ctm-lt-tt-an, center))
      );
      gap: var(--_ctm-mob-lt-gp, var(--_ctm-tab-lt-gp, var(--_ctm-lt-gp)));

      width: 100%;
      height: 100%;

      border-radius: var(
        --_sf-hr-br-br,
        var(--_ctm-mob-dn-dt-se-br-rs, var(--_ctm-tab-dn-dt-se-br-rs, var(--_ctm-dn-dt-se-br-rs)))
      );
      box-shadow: var(
        --_hover-show-shadow,
        var(
          --_sf-hr-bx-sw,
          var(
            --_show-shadow,
            var(
                --_ctm-mob-dn-dt-se-sw-ae,
                var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
              )
              var(
                --_ctm-mob-dn-dt-se-sw-br,
                var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
              )
              var(
                --_ctm-mob-dn-dt-se-sw-sd,
                var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
              )
              var(
                --_ctm-mob-dn-dt-se-sw-cr,
                var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
              )
          )
        )
      );
      &[data-show-border="true"] {
        border-color: var(
          --_sf-hr-br-cr,
          var(--_ctm-mob-dn-dt-se-br-cr, var(--_ctm-tab-dn-dt-se-br-cr, var(--_ctm-dn-dt-se-br-cr)))
        );
        border-style: var(
          --_sf-hr-br-st,
          var(--_ctm-mob-dn-dt-se-br-se, var(--_ctm-tab-dn-dt-se-br-se, var(--_ctm-dn-dt-se-br-se)))
        );
        border-width: var(
          --_sf-hr-br-wh,
          var(--_ctm-mob-dn-dt-se-br-wh, var(--_ctm-tab-dn-dt-se-br-wh, var(--_ctm-dn-dt-se-br-wh)))
        );
      }

      .txt {
        display: flex;
        color: var(
          --_sf-hr-fc,
          var(--_ctm-mob-dn-dt-se-cr, var(--_ctm-tab-dn-dt-se-cr, var(--_ctm-dn-dt-se-cr)))
        );
        font-family: var(
          --_sf-hr-ff,
          var(--_ctm-mob-dn-dt-se-ft-fy, var(--_ctm-tab-dn-dt-se-ft-fy, var(--_ctm-dn-dt-se-ft-fy)))
        );
        text-transform: var(
          --_sf-hr-tt-tm,
          var(--_ctm-mob-dn-dt-se-tt-tm, var(--_ctm-tab-dn-dt-se-tt-tm, var(--_ctm-dn-dt-se-tt-tm)))
        );
        word-wrap: var(
          --_sf-hr-wd-wp,
          var(--_ctm-mob-dn-dt-se-wd-wp, var(--_ctm-tab-dn-dt-se-wd-wp, var(--_ctm-dn-dt-se-wd-wp)))
        );
        word-break: var(
          --_sf-hr-wd-bk,
          var(--_ctm-mob-dn-dt-se-wd-bk, var(--_ctm-tab-dn-dt-se-wd-bk, var(--_ctm-dn-dt-se-wd-bk)))
        );
        &.flex__overflow {
          white-space: normal;
          @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
        }
        font-size: var(
          --_sf-hr-fs,
          var(--_ctm-mob-dn-dt-se-ft-se, var(--_ctm-tab-dn-dt-se-ft-se, var(--_ctm-dn-dt-se-ft-se)))
        );
        font-weight: var(
          --_sf-hr-fw,
          var(--_ctm-mob-dn-dt-se-ft-wt, var(--_ctm-tab-dn-dt-se-ft-wt, var(--_ctm-dn-dt-se-ft-wt)))
        );
        font-style: var(
          --_sf-hr-ft,
          var(
            --_ctm-mob-dn-dt-se-ft-se-ic,
            var(--_ctm-tab-dn-dt-se-ft-se-ic, var(--_ctm-dn-dt-se-ft-se-ic))
          )
        );
        text-align: var(
          --_sf-hr-ta,
          var(--_ctm-mob-dn-dt-se-tt-an, var(--_ctm-tab-dn-dt-se-tt-an, var(--_ctm-dn-dt-se-tt-an)))
        );
        letter-spacing: var(
          --_sf-hr-ls,
          var(--_ctm-mob-dn-dt-se-lr-sg, var(--_ctm-tab-dn-dt-se-lr-sg, var(--_ctm-dn-dt-se-lr-sg)))
        );
        line-height: var(
          --_sf-hr-lh,
          var(--_ctm-mob-dn-dt-se-le-ht, var(--_ctm-tab-dn-dt-se-le-ht, var(--_ctm-dn-dt-se-le-ht)))
        );
        text-decoration: var(
          --_sf-hr-tt-dn,
          var(--_ctm-mob-dn-dt-se-ue, var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue)))
        );
      }

      .icon {
        display: var(--_hover-show-icon, var(--_show-icon, flex));
        svg {
          width: var(
            --_sf-hr-ic-wt,
            var(
              --_ctm-mob-dn-dt-se-in-se,
              var(--_ctm-tab-dn-dt-se-in-se, var(--_ctm-dn-dt-se-in-se))
            )
          );
          height: var(
            --_sf-hr-ic-ht,
            var(
              --_ctm-mob-dn-dt-se-in-se,
              var(--_ctm-tab-dn-dt-se-in-se, var(--_ctm-dn-dt-se-in-se))
            )
          );
          path {
            stroke: var(
              --_sf-hr-ic-st,
              var(
                --_ctm-mob-dn-dt-se-in-c1,
                var(--_ctm-tab-dn-dt-se-in-c1, var(--_ctm-dn-dt-se-in-c1))
              )
            );
            // Overrides the stroke-width presentation attribute baked into the icon markup.
            stroke-width: prepareMediaVariable(--_ctm-dn-dt-se-se-wh, 1.25);
          }
        }
      }
      [data-element-style="Text"] {
        display: inline-block;
        width: 100%;
      }
    }
  }
}